<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延大创新期末成绩查询小窗口</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" media="all"/>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>

</head>

<body>
<form class="layui-form">
    <div class="layui-form-item" style="    margin-top: 10px;
    margin-right: 10px;">
        <label class="layui-form-label">学年</label>
        <div class="layui-input-block">
            <select name="xn" lay-filter="aihao">
                <option value="2015" selected="">2015-2016学年</option>
                <option value="2016">2016-2017学年</option>
                <option value="2017">2017-2018学年</option>
                <option value="2018">2018-2019学年</option>
                <option value="2019">2019-2020学年</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" style="    margin-top: 10px;
    margin-right: 10px;">
        <label class="layui-form-label">学期</label>
        <div class="layui-input-block">
            <select name="xqxn" lay-filter="aihao">
                <option value="0">第一学期</option>
                <option value="1">第二学期</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button id="create" class="layui-btn" type="button" onclick="queryScore()">查询
            </button>
        </div>
    </div>
</form>

</body>

<script>

    layui.use('form', function () {
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

        //……

        //但是，如果你的HTML是动态生成的，自动渲染就会失效
        //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
        form.render();
    });

    function queryScore() {
        var xqxn = $("select[name=xqxn] :selected").val();
        var xn = $("select[name=xn] :selected").val();
        $.get('/api/getScore?xqxn=' + xqxn + '&xn=' + xn, function (ret) {
            console.log(ret)
            if (ret.code == 200) {
                //在这里面输入任何合法的js语句
                if (ret.data.length > 0) {
                    var arr1 = ret.data;
                    var scores = "";
                    scores += "<table class=\"layui-table\" lay-even=\"\" lay-skin=\"nob\">\n" +
                        "    <table class=\"layui-table\" lay-skin=\"line\">\n" +
                        "<colgroup>\n" +
                        "            <col width=\"1111\">\n" +
                        "            <col width=\"1111\">\n" +
                        "            <col width=\"1111\">\n" +
                        "            <col width=\"1400\"><col>\n" +
                        "        </colgroup>" +
                        "        <thead>\n" +
                        "        <tr>\n" +
                        "            <th style='width: 25%'>课程名</th>\n" +
                        "            <th style='width: 25%'>学分</th>\n" +
                        "            <th style='width: 25%'>成绩</th>\n" +
                        "            <th style='width: 25%'>课程类型</th>\n" +
                        "        </tr>\n" +
                        "        </thead>\n" +
                        "        <tbody>\n";
                    $.each(arr1, function (i, val) {
                        scores +=
                            "        <tr>\n" +
                            "            <td>" + val.courseName + "</td>\n" +
                            "            <td>" + val.courseCredit + "</td>\n" +
                            "            <td style='color: red;'>" + val.score + "</td>\n" +
                            "            <td>" + val.courseType + "</td>\n" +
                            "        </tr>\n";
                        // scores += "课程名：" + val.courseName + "<br/>学分："+val.courseCredit +"<br/>课程类型："+val.courseType
                        // +"<br/>成绩："+val.score+"<br/> <p style='color: #00FFFF'>========我是华丽的分割线=========</p><br/> ";
                    });
                    scores +=
                        "        </tbody>\n" +
                        "    </table>\n" +
                        "</table>";
                    $(".layui-layer-page").prop('left', '0px');
                    //在这里面输入任何合法的js语句
                    layer.open({
                        title: '<span style="font-size:13px">查询结果</span>',
                        type: 1 //Page层类型
                        ,
                        area: ['95%', '100%'],
                        shade: 0.6//遮罩透明度
                        ,
                        maxmin: true//允许全屏最小化
                        ,
                        anim: 1 //0-6的动画形式，-1不开启
                        ,
                        content: '<div>' + scores.toString() + '</div>'
                    });

                }


            } else {
                layer.open({
                    title: '查询结果',
                    type: 1 //Page层类型
                    ,
                    area: ['100%', '100%'],
                    shade: 0.6//遮罩透明度
                    ,
                    maxmin: true//允许全屏最小化
                    ,
                    anim: 1 //0-6的动画形式，-1不开启
                    ,
                    content: '<div>' + ret.data + '</div>'
                });
            }
        })
    }

</script>
</html>